import 'package:flutter/material.dart';
import 'package:portal_website/pages/common_header.dart';
import 'package:portal_website/tool/image_network.dart';

class BrandBuildingPage extends StatelessWidget {
  const BrandBuildingPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F9FF),
      body: Container(
        margin: EdgeInsets.only(top: 50),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 头部导航
              Breadcrumb(text: "首页 > 服务能力 > 品牌建设"),

              PageTitle(
                  title: "品牌建设服务", subtitle: "专业品牌建设解决方案，助力企业打造差异化竞争优势和长期品牌价值"),
              // 页面内容容器
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    // 品牌建设介绍
                    _buildIntroductionSection(),

                    // 品牌建设流程
                    _buildProcessSection(),

                    // 品牌价值
                    _buildValueSection(),

                    // 案例展示
                    _buildCasesSection(),
                  ],
                ),
              ),

              // 页脚
              _buildFooter(),
            ],
          ),
        ),
      ),
    );
  }

  // 头部导航组件
  Widget _buildHeader(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xFF1E5799), Color(0xFF207CCA)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.vertical(bottom: Radius.circular(8)),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 20,
            offset: Offset(0, 5),
          ),
        ],
      ),
      padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 30),
      child: Container(
        constraints: const BoxConstraints(maxWidth: 1200),
        margin: const EdgeInsets.symmetric(horizontal: 20),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text(
              '创新服务平台',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            // 导航菜单
            _buildNavigationMenu(context),
          ],
        ),
      ),
    );
  }

  // 导航菜单
  Widget _buildNavigationMenu(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 768) {
          // 移动端导航
          return IconButton(
            icon: const Icon(Icons.menu, color: Colors.white),
            onPressed: () {
              // 打开导航抽屉
              Scaffold.of(context).openEndDrawer();
            },
          );
        }

        // 桌面端导航
        return Row(
          children: [
            _buildNavItem('首页', () {}),
            _buildNavItem('服务能力', () {}),
            _buildNavItem('品牌建设', () {}, isActive: true),
            _buildNavItem('成功案例', () {}),
            _buildNavItem('联系我们', () {}),
          ],
        );
      },
    );
  }

  // 导航项
  Widget _buildNavItem(String title, VoidCallback onTap,
      {bool isActive = false}) {
    return Padding(
      padding: const EdgeInsets.only(left: 25),
      child: InkWell(
        onTap: onTap,
        child: Text(
          title,
          style: TextStyle(
            color: Colors.white,
            fontSize: 16,
            fontWeight: isActive ? FontWeight.bold : FontWeight.normal,
          ),
        ),
      ),
    );
  }

  // 品牌建设介绍
  Widget _buildIntroductionSection() {
    return Container(
      margin: const EdgeInsets.only(bottom: 40),
      padding: const EdgeInsets.all(40),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 15,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text(
            '品牌建设服务概述',
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 22,
              fontWeight: FontWeight.bold,
              // margin: EdgeInsets.only(bottom: 20),
            ),
          ),
          Text(
            '在竞争激烈的市场环境中，品牌是企业最宝贵的无形资产。我们的品牌建设服务从市场调研入手，深入分析行业趋势和竞争格局，帮助企业明确品牌定位，构建独特的品牌形象和品牌价值体系。',
            style: TextStyle(
              color: Color(0xFF333333),
              fontSize: 16,
              height: 1.6,
            ),
          ),
        ],
      ),
    );
  }

  // 品牌建设流程
  Widget _buildProcessSection() {
    return Container(
      margin: const EdgeInsets.only(bottom: 40),
      padding: const EdgeInsets.all(40),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 15,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        children: [
          const Text(
            '品牌建设流程',
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 22,
              fontWeight: FontWeight.bold,
              // margin: EdgeInsets.only(bottom: 10),
            ),
          ),
          const Text(
            '科学严谨的品牌建设流程，确保品牌战略有效落地',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
              // margin: EdgeInsets.only(bottom: 40),
            ),
          ),

          // 流程步骤
          LayoutBuilder(
            builder: (context, constraints) {
              if (constraints.maxWidth < 768) {
                // 移动端流程（垂直排列）
                return Column(
                  children: _buildProcessSteps(),
                );
              }

              // 桌面端流程（水平排列）
              return Stack(
                children: [
                  // 连接线
                  Positioned(
                    top: 30,
                    left: 0,
                    right: 0,
                    height: 3,
                    child: Container(
                      decoration: const BoxDecoration(
                        gradient: LinearGradient(
                          colors: [Color(0xFF207CCA), Color(0xFF1E5799)],
                        ),
                      ),
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: _buildProcessSteps(),
                  ),
                ],
              );
            },
          ),
        ],
      ),
    );
  }

  // 流程步骤列表
  List<Widget> _buildProcessSteps() {
    final steps = [
      {'number': '1', 'title': '市场调研', 'desc': '分析行业趋势、竞争格局和目标受众'},
      {'number': '2', 'title': '品牌定位', 'desc': '确定品牌差异化定位和核心价值主张'},
      {'number': '3', 'title': '创意设计', 'desc': '开发品牌名称、标志和视觉识别系统'},
      {'number': '4', 'title': '传播规划', 'desc': '制定整合营销传播策略和执行计划'},
      {'number': '5', 'title': '落地实施', 'desc': '执行品牌传播活动，监测品牌表现'},
    ];

    return steps.map((step) {
      return LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth < 768) {
            // 移动端步骤项
            return Padding(
              padding: const EdgeInsets.only(bottom: 30),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  _buildStepNumber(step['number']!),
                  const SizedBox(width: 20),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      _buildStepTitle(step['title']!),
                      _buildStepDesc(step['desc']!),
                    ],
                  ),
                ],
              ),
            );
          }

          // 桌面端步骤项
          return Container(
            width: 160,
            child: Column(
              children: [
                _buildStepNumber(step['number']!),
                _buildStepTitle(step['title']!),
                _buildStepDesc(step['desc']!),
              ],
            ),
          );
        },
      );
    }).toList();
  }

  // 步骤编号
  Widget _buildStepNumber(String number) {
    return Container(
      width: 60,
      height: 60,
      decoration: BoxDecoration(
        color: const Color(0xFF207CCA),
        borderRadius: BorderRadius.circular(30),
        boxShadow: const [
          BoxShadow(
            color: Color.fromRGBO(30, 87, 153, 0.3),
            blurRadius: 15,
            offset: Offset(0, 5),
          ),
        ],
      ),
      child: Center(
        child: Text(
          number,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }

  // 步骤标题
  Widget _buildStepTitle(String title) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 10),
      child: Text(
        title,
        style: const TextStyle(
          color: Color(0xFF1E5799),
          fontSize: 16,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }

  // 步骤描述
  Widget _buildStepDesc(String desc) {
    return Text(
      desc,
      style: const TextStyle(
        color: Color(0xFF666666),
        fontSize: 14,
        // textAlign: TextAlign.center,
      ),
    );
  }

  // 品牌价值部分
  Widget _buildValueSection() {
    return Container(
      margin: const EdgeInsets.only(bottom: 40),
      padding: const EdgeInsets.all(60),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [Color(0xFF1E5799), Color(0xFF207CCA)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        children: [
          const Text(
            '品牌价值',
            style: TextStyle(
              color: Colors.white,
              fontSize: 28,
              fontWeight: FontWeight.bold,
              // margin: EdgeInsets.only(bottom: 40),
            ),
          ),

          // 价值网格
          GridView.count(
            padding: EdgeInsets.only(top: 20),
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            crossAxisCount: 3,
            crossAxisSpacing: 30,
            mainAxisSpacing: 30,
            childAspectRatio: 1.5,
            children: [
              _buildValueItem('提升品牌认知度', '扩大品牌影响力，让更多目标客户了解品牌'),
              _buildValueItem('增强品牌忠诚度', '建立稳定客户群体，提高客户复购率'),
              _buildValueItem('创造品牌溢价', '提升产品附加值，获得更高利润空间'),
              _buildValueItem('差异化竞争', '在激烈竞争中脱颖而出，形成独特优势'),
              _buildValueItem('企业资产增值', '品牌作为无形资产，提升企业整体价值'),
              _buildValueItem('吸引优秀人才', '强大的品牌吸引力有助于招募顶尖人才'),
            ],
          ),
        ],
      ),
    );
  }

  // 价值项
  Widget _buildValueItem(String title, String desc) {
    return Container(
      padding: const EdgeInsets.all(30),
      decoration: BoxDecoration(
        color: Colors.white10,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        children: [
          const Icon(
            Icons.star,
            color: Colors.white,
            size: 40,
          ),
          const SizedBox(height: 20),
          Text(
            title,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 20,
              fontWeight: FontWeight.bold,
              // margin: EdgeInsets.only(bottom: 15),
            ),
          ),
          Text(
            desc,
            textAlign: TextAlign.center,
            style: const TextStyle(
              color: Colors.white70,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }

  // 案例展示
  Widget _buildCasesSection() {
    return Container(
      margin: const EdgeInsets.only(bottom: 40),
      padding: const EdgeInsets.all(40),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 15,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            '成功案例',
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 22,
              fontWeight: FontWeight.bold,
              // margin: EdgeInsets.only(bottom: 30),
            ),
          ),

          // 案例列表
          GridView.count(
            shrinkWrap: true,
            padding: EdgeInsets.only(top: 20),
            physics: const NeverScrollableScrollPhysics(),
            crossAxisCount: 3,
            crossAxisSpacing: 30,
            mainAxisSpacing: 30,
            childAspectRatio: 300 / 320,
            children: [
              _buildCaseCard('科技公司品牌重塑', '为某领先科技企业进行全面品牌升级，提升市场竞争力'),
              _buildCaseCard('消费品品牌建设', '帮助快消品牌打造差异化形象，实现销量增长30%'),
              _buildCaseCard('服务行业品牌转型', '为传统服务企业构建现代品牌体系，拓展年轻客户群体'),
            ],
          ),
        ],
      ),
    );
  }

  // 案例卡片
  Widget _buildCaseCard(String title, String desc) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 15,
            offset: Offset(0, 5),
          ),
        ],
        // overflow: ClipRect,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 案例图片
          Container(
            height: 200,
            color: const Color(0xFFEEEEEE),
            child: ImageNetwork(
              '',
              width: double.infinity,
              height: double.infinity,
              fit: BoxFit.cover,
            ),
          ),

          // 案例内容
          Padding(
            padding: const EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    color: Color(0xFF1E5799),
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    // margin: EdgeInsets.only(bottom: 10),
                  ),
                ),
                Text(
                  desc,
                  style: const TextStyle(
                    color: Color(0xFF666666),
                    fontSize: 14,
                    // margin: EdgeInsets.only(bottom: 15),
                  ),
                ),
                const Text(
                  '查看详情 →',
                  style: TextStyle(
                    color: Color(0xFF207CCA),
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 页脚
  Widget _buildFooter() {
    return Container(
      padding: const EdgeInsets.all(40),
      decoration: const BoxDecoration(
        color: Color(0xFF1A1A2E),
        borderRadius: BorderRadius.vertical(top: Radius.circular(8)),
      ),
      child: Column(
        children: [
          // 页脚链接
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            // flexWrap: Wrap,
            children: [
              _buildFooterLink('首页'),
              _buildFooterLink('服务能力'),
              _buildFooterLink('品牌建设'),
              _buildFooterLink('成功案例'),
              _buildFooterLink('联系我们'),
            ],
          ),
          const SizedBox(height: 20),
          const Text(
            '© 2023 创新服务平台 版权所有',
            style: TextStyle(
              color: Colors.white70,
              fontSize: 14,
            ),
          ),
        ],
      ),
    );
  }

  // 页脚链接
  Widget _buildFooterLink(String title) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Text(
        title,
        style: const TextStyle(
          color: Color(0xFFA8B2D1),
          fontSize: 14,
        ),
      ),
    );
  }
}

// 主应用入口
class BrandBuildingApp extends StatelessWidget {
  const BrandBuildingApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '品牌建设服务 - 创新服务平台',
      theme: ThemeData(
        primaryColor: const Color(0xFF1E5799),
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const BrandBuildingPage(),
    );
  }
}
